<template>
  <div class="box">
    <div class="detail-head">
      <i @click="goback" class="iconfont icon-fanhui"></i>
      <h2>商品详情</h2>
    </div>
    <div class="detail-cont">
      <div class="detail-list">
        <img src="https://tgi1.jia.com/119/624/19624632.jpg" alt="">
        <h1>宝宝秋冬加棉保暖套装</h1>
        <span>￥199</span><span>好评99%</span>
        <p class="vip">会员价￥99</p>
        <div class="jieshao">
          <ul>
            <li>设计者：WYYZMc</li>
            <li>材质：100%纯棉</li>
            <li>颜色：浅蓝、浅粉、浅绿</li>
            <li>适龄期：3~5岁宝宝</li>
          </ul>
        </div>
        <button @click="comment">评价</button>
        <button>规格</button>
        <div class="pingjia">
          <h3>vivi妈妈</h3>
          <p>宝贝很好，材质很好，手感也很柔软，适合宝宝穿</p>
        </div>
      </div>
      <div class="detail-bottom">
        <div class="cart" @click="make">
          加入购物车
        </div>
        <div class="bay" @click="make">
          立即购买
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  methods: {
    goback () {
      this.$router.go(-1)
    },
    make () {
      this.$router.push('/prodetail2')
    },
    comment () {
      this.$router.push('/comment')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.detail-head {
  @include rect(100%, 0.42rem);
  background: rgba(235, 235, 235, 0.849);
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    color: #444343;
  }
}
.detail-cont {
  @include rect(100%, 100%);
  .detail-list {
    @include rect(3.06rem, 92%);
     overflow: auto;
    margin-left: 0.35rem;
    img {
      margin-top: 0.1rem;
      @include rect(3.04rem, 3.22rem);
      border-radius: 0.12rem;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid rgba(223, 215, 215, 1);
    }
    h1 {
      font-size: 0.2rem;
      font-weight: 500;
      width: 100%;
      text-align: center;
      color: #636363;
      line-height: 0.3rem;
      margin: 0.1rem 0;
    }
    span {
      display: inline-block;
      @include rect(0.7rem, 0.25rem);
      border: 1px solid #cccccc;
      border-radius: 0.14rem;
      text-align: center;
      line-height: 0.25rem;
      margin-left: 0.55rem;
      color: #838282;
    }
    .vip {
      @include rect(1rem, 0.25rem);
      border-radius: 0.14rem;
      line-height: 0.27rem;
      text-align: center;
      margin: 0.1rem auto;
      background: #e65151;
      color: #fff;
    }
    .jieshao {
      width: 3.04rem;
      height: 0.53rem;
      line-height: 0.20rem;
      border-radius: 0.08rem;
      text-align: center;
      border: 1px solid rgba(187, 187, 187, 1);
      ul {
        height: 0.4rem;
        margin-top: 0.05rem;
        li {
          float: left;
          height: 0.2rem;
          line-height: 0.2rem;
          color: rgba(106, 106, 106, 1);
          font-size: 0.12rem;
          text-align: left;
          font-family: Arial;
          margin-left: 0.15rem;
        }
        li:nth-of-type(2){
          margin-left: 0.65rem;
        }
        li:nth-of-type(4){
          margin-left: 0.3rem;
        }
      }
    }
    button {
      width: 1.23rem;
      height: 0.34rem;
      line-height: 0.20rem;
      border-radius: 0.10rem;
      color: rgb(68, 67, 67);
      font-size: 0.14rem;
      text-align: center;
      font-family: Arial;
      border: 1px solid rgba(187, 187, 187, 1);
      background: rgba(202, 201, 201, 0.856);
      margin: 0.1rem 0;
    }
    button:nth-of-type(2){
      margin-left: 0.53rem;
    }
    .pingjia {
      width: 3.04rem;
      height: 0.53rem;
      line-height: 0.20rem;
      border-radius: 0.08rem;
      border: 1px solid rgba(187, 187, 187, 1);
      h3 {
        text-indent: 0.1rem;
        font-size: 0.12rem;
        font-family: PingFangSC-regular;
      }
      p {
        height: 0.12rem;
        color: rgba(16, 16, 16, 1);
        font-size: 0.1rem;
        text-align: left;
        font-family: PingFangSC-regular;
        text-indent: 0.1rem;
      }
    }
  }
  .detail-bottom {
    @include rect(100%, 0.5rem);
    position: fixed;
    bottom: 0;
    left: 0;
    .cart {
      @include rect(50%, 0.5rem);
      border-radius: 0.17rem ;
      background: #f5bc21;
      float: left;
      color: #fff;
      font-size: 0.2rem;
      line-height: 0.5rem;
      text-align: center;
    }
    .bay {
      float: left;
      @include rect(50%, 0.5rem);
      border-radius: 0.17rem;
      background: #fa633d;
      color: #fff;
      font-size: 0.2rem;
      line-height: 0.5rem;
      text-align: center;
    }
  }
}
</style>
